<template>
  <div class="page-fs">
    <a-row>
      <a-col :span="8">
        <a-input
          v-model:value="cameraIndexCode"
          placeholder="请输入 cameraIndexCode"
        />
      </a-col>
      <a-col
        :span="16"
        style="text-align: left; padding-left: 20px;"
      >
        <a-button @click="player">
          链接
        </a-button>
        <a-button @click="videoObj.pause()">
          暂停
        </a-button>
        <a-button
          ref="playBtn"
          @click="videoObj.play()"
        >
          播放
        </a-button>
      </a-col>
    </a-row>
    <video
      id="ntd-video"
      muted="“muted”"
      style="object-fit: fill"
      class="video-js  vjs-big-play-centered page-fs"
      controls
      preload="auto"
    >
      <source
        :src="sourceSrc"
        type="application/x-mpegURL"
      >
    </video>
  </div>
</template>

<script>
import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
import { getHlsUrl } from './ApiHaikang'
import { ref } from "vue";

export default {
  data() {
    return {
      sourceSrc: undefined,
      cameraIndexCode: ref('3490e21c368e4410a72e22251cafc902'),
      videoObj: undefined
    }
  },
  mounted() {
    this.player()
  },
  methods: {
    player() {
      getHlsUrl(this.cameraIndexCode).then(res => {
        this.sourceSrc = res.url
        console.log(this.sourceSrc)
        this.$nextTick(() => {
          this.initVideo()
        })
      })
    },
    initVideo() {
      let _this = this
      if (this.videoObj) {
        this.videoObj.src(this.sourceSrc)
        return
      }
      this.videoObj = videoJs("ntd-video", {
        autoplay: true,
      }, function onPlayerReady() {
        videoJs.log('应用初始化完成!');
        // _this.videoObj.src(_this.sourceSrc)
      });
    }
  }
}
</script>

<style scoped>

</style>